.background {
  background-color: #AECFE9;
  position: absolute;
  width: 100%;
  height: 100%;
}

.background img {
  position: absolute;
  display: block;
  -webkit-animation-name: move-to-right;
          animation-name: move-to-right;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.background .c1 {
  width: 4.288rem;
  height: 3.008rem;
  top: 2.56rem;
  left: -4.26667rem;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

.background .c2 {
  width: 4.16rem;
  height: 2.944rem;
  top: 2.13333rem;
  left: -4.26667rem;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}

.background .c3 {
  width: 6.592rem;
  height: 3.904rem;
  top: 0rem;
  left: -6.61333rem;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.page-1 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  opacity: 1;
}

.page-1 .moo {
  width: 13.90933rem;
  height: 5.29067rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 17.49333rem;
  -webkit-transition-delay: 1000ms;
          transition-delay: 1000ms;
}

.page-1 .text {
  width: 9.664rem;
  height: 1.472rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 16.21333rem;
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}

.page-1 .pan {
  z-index: 1;
  width: 11.22133rem;
  height: 14.272rem;
  bottom: 1.70667rem;
  right: 0.21333rem;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}

.page-1 .bg {
  width: 16rem;
  height: 9.04533rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-1.hide .moo {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .text {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .pan {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .bg {
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}

.page-2 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-2 .ani {
  width: 12.84267rem;
  height: 7.70133rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 13.44rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-2 .text {
  width: 13.80267rem;
  height: 9.89867rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 5.97333rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}

.page-2 .text-content {
  width: 10.368rem;
  height: 6.4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 8.10667rem;
  -webkit-transition-delay: 1400ms;
          transition-delay: 1400ms;
}

.page-2 .user {
  z-index: 1;
  width: 4.30933rem;
  height: 5.41867rem;
  bottom: 0.85333rem;
  left: 1.49333rem;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.page-2 .bg {
  width: 16rem;
  height: 5.97333rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-2.hide .ani {
  bottom: 17.06667rem;
  left: 16rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-2.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-2.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-2.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-2.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-3 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-3 .bg {
  width: 16rem;
  height: 7.808rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-3 .ani {
  width: 8.17067rem;
  height: 14.528rem;
  left: 5.97333rem;
  right: 0;
  margin: 0 auto;
  bottom: 2.13333rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-3 .text {
  width: 12.88533rem;
  height: 10.816rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 11.73333rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}

.page-3 .text-content {
  width: 8.34133rem;
  height: 5.26933rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 14.93333rem;
  -webkit-transition-delay: 1400ms;
          transition-delay: 1400ms;
}

.page-3.hide .ani {
  bottom: 0.85333rem;
  left: 2.13333rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-3.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-3.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-3.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-3.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-4 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-4 .bg {
  z-index: 4;
  width: 16rem;
  height: 17.10933rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-4 .ani {
  width: 8.17067rem;
  height: 14.528rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 13.44rem;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-4 .text {
  z-index: 2;
  width: 13.248rem;
  height: 11.648rem;
  left: 2.56rem;
  right: 0;
  bottom: 11.73333rem;
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
}

.page-4 .text-content {
  z-index: 3;
  width: 10.13333rem;
  height: 7.12533rem;
  left: 4.26667rem;
  right: 0;
  bottom: 13.86667rem;
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}

.page-4.hide .ani {
  bottom: 17.06667rem;
  left: 16rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-4.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-4.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-4.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-4.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-5 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-5 .bg {
  width: 16rem;
  height: 7.70133rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-5 .ani {
  width: 12.8rem;
  height: 13.632rem;
  left: 2.77333rem;
  right: 0;
  bottom: 2.98667rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-5 .text {
  width: 13.26933rem;
  height: 9.6rem;
  left: 0.42667rem;
  right: 0;
  bottom: 12.37333rem;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}

.page-5 .text-content {
  width: 8.74667rem;
  height: 6.31467rem;
  left: 2.98667rem;
  right: 0;
  bottom: 14.72rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
}

.page-5.hide .ani {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-5.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-5.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-5.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-6 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-6 .bg {
  width: 16rem;
  height: 7.68rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-6 .ani {
  width: 10.32533rem;
  height: 15.76533rem;
  left: 0.21333rem;
  right: 0;
  bottom: 2.98667rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-6 .text {
  width: 12.224rem;
  height: 10.90133rem;
  left: 3.62667rem;
  right: 0;
  bottom: 10.02667rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}

.page-6 .text-content {
  width: 7.70133rem;
  height: 6.99733rem;
  left: 6.4rem;
  right: 0;
  bottom: 12.16rem;
  -webkit-transition-delay: 1400ms;
          transition-delay: 1400ms;
}

.page-6.hide .ani {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-6.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-6.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-6.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-6.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-7 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-7 .bg {
  width: 16rem;
  height: 24.17067rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-7 .ani {
  width: 4.18133rem;
  height: 5.65333rem;
  left: 0.85333rem;
  right: 0;
  bottom: 18.77333rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-7.hide .ani {
  bottom: 17.06667rem;
  left: 16rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-7.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-8 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-8 .bg {
  width: 16rem;
  height: 24.192rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-8 .ani {
  width: 12.13867rem;
  height: 8.02133rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 18.56rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-8.hide .ani {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-8.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-9 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-9 .bg {
  width: 16rem;
  height: 24.21333rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-9 .ani {
  width: 7.01867rem;
  height: 7.21067rem;
  left: 0.21333rem;
  right: 0;
  bottom: 17.49333rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-9.hide .ani {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-9.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

.page-10 > img, .page-10 a {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-10 .bg {
  width: 5.46133rem;
  height: 3.328rem;
  bottom: 2.77333rem;
  right: 0;
  left: 0;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  margin: 0 auto;
}

.page-10 .ani {
  width: 6.912rem;
  height: 6.76267rem;
  left: 0.21333rem;
  bottom: 16.85333rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-10 .text {
  width: 13.99467rem;
  height: 13.65333rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 7.46667rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}

.page-10 .text-content {
  width: 10.944rem;
  height: 10.176rem;
  left: 3.41333rem;
  bottom: 8.74667rem;
  -webkit-transition-delay: 1400ms;
          transition-delay: 1400ms;
}

.page-10.hide .ani {
  bottom: 17.06667rem;
  left: 16rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-10.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-10.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-10.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-10.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

@-webkit-keyframes move-to-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(25.6rem, 0, 0);
            transform: translate3d(25.6rem, 0, 0);
  }
}

@keyframes move-to-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(25.6rem, 0, 0);
            transform: translate3d(25.6rem, 0, 0);
  }
}

@-webkit-keyframes animation-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes animation-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
